<template>
    <view class="content bg_com">
        <!-- 固定头部 -->
        <view class="header_warp">
            <com-nav-bar>
                <template>
                    <view class="inner row_center">
                        <view class="search_warp"
                              @click="jumpSearch">
                            <image class="icon"
                                   src="../../../static/search2x.png"
                                   mode="scaleToFill"></image>
                            <view class="input_warp">搜索昵称、ID、房间</view>
                        </view>
                    </view>
                </template>
            </com-nav-bar>
            <!-- 选项卡 -->
            <view class="tabs">
                <scroll-view class="scroll-h"
                             :scroll-x="true"
                             :show-scrollbar="false"
                             :scroll-into-view="scrollInto">
                    <view class="_item"
                          :key="item.id"
                          :id="item.singId"
                          :class="{active: (activeIndex == index)}"
                          @click="change(item, index)"
                          v-for="(item, index) in menuList">
                        <view class="title">
                            {{item.name}}
                        </view>
                    </view>
                    <view class="_underline"
                          :style="styleObject">
                        <view class="indicator"></view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!-- 房间列表 -->
        <scroll-view :style="{height: scroll_height}"
                     class="scroll_warp"
                     @scrolltolower="scrolltolower"
                     scroll-y="true">
            <view class="list_box row_center">
                <view class="room_item"
                      @click="jumpRoom(item)"
                      v-for="(item, index) in roomList"
                      :key="index">
                    <view class="top_left_icon row_center">
                        <view class="loading-mark">
                            <view class="loader-15"></view>
                        </view>
                        <image class="tagPict"
                               :src="item.tagPict"
                               mode="scaleToFill"></image>
                        <!-- <view class="txt">
							{{item.roomTag}}
						</view> -->
                    </view>
                    <view v-if="item.pkSign == 1"
                          class="top_right_icon row_center">
                        <image class="pk_img"
                               src="../../../static/pk2x.png"
                               mode="scaleToFill"></image>
                    </view>
                    <view class="bottom_right_icon row_center">
                        <view class="hot_num row_center">
                            <image class="hot_img"
                                   src="../../../static/hot2x.png"
                                   mode="scaleToFill"></image>
                            {{item.heat}}
                        </view>
                    </view>
                    <image class="bg_img"
                           :src="item.avatar"
                           mode="aspectFit"></image>
                </view>
            </view>
            <uni-load-more :status="status"
                           :content-text="contentText" />
        </scroll-view>
        <!-- <swiper class="swiper-box" :style="{height:swiperheight+'px'}" @change="swiperChange" :current="activeIndex" :indicator-dots="false" :autoplay="false" :duration="500">
			<swiper-item>
				
				<scroll-view :style="{height: scroll_height}" class="scroll_warp" scroll-y="true">
					<view class="list_box row_center">
						<view class="room_item" @click="jumpRoom" v-for="(item, index) in heatRooms" :key="index">
							<view class="top_left_icon row_center">
								<view class="loading-mark">
									<view class="loader-15"></view>
								</view>
								<image class="tagPict" :src="item.tagPict" mode="scaleToFill"></image>
								<view class="txt">
									{{item.roomTag}}
								</view>
							</view>
							<view v-if="item.isPk" class="top_right_icon row_center">
								<image class="pk_img" src="../../../static/pk2x.png" mode="scaleToFill"></image>
							</view>
							<view class="bottom_right_icon row_center">
								<view class="hot_num row_center">
									<image class="hot_img" src="../../../static/hot2x.png" mode="scaleToFill"></image>
									{{item.heat}}
								</view>
							</view>
							<image class="bg_img" :src="item.avatar" mode="aspectFit"></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper> -->

    </view>
</template>

<script>
import comNavBar from '@/components/com-nav-bar/com-nav-bar.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {mapState} from 'vuex';
var timer = null;
export default {
    components: {
        comNavBar,
        uniLoadMore
    },
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            scroll_height: 0,
            statusBarH: this.statusBar,
            customBarH: this.customBar,
            swiperheight: 0,
            activeIndex: 0,
            menuList: [{
                id: -1,
                name: '推荐',
                sginId: 'home'
            }],
            tagId: -1,
            scrollInto: "",
            heatRooms: [],
            roomList: [],
            status: 'more',
            contentText: {
                contentdown: '上拉加载更多...',
                contentrefresh: '加载中....',
                contentnomore: '暂无更多内容'
            },
        }
    },
    computed: {
        style() {
            let _style = `height: ${this.customBarH}px;`
            return _style
        },
        styleObject() {
            let _style = `transform: translateX(${this.activeIndex}00%)`
            return _style;
        },
		...mapState(['hasLogin', 'user', 'identity'])
    },
    onReady() {
        var _this = this;
        uni.getSystemInfo({
            success: (resu) => {
                var pxVal = uni.upx2px(104);
                const query = uni.createSelectorQuery()
                query.select('.tabs').boundingClientRect()
                query.exec(function (res) {
                    _this.scroll_height = resu.windowHeight - (res[0].top + pxVal) + 'px';
                    _this.swiperheight = resu.windowHeight - (res[0].top + pxVal);
                    console.log(_this.scroll_height +
                        '=========================================高度')
                })

                /* let height = resu.windowHeight - uni.upx2px(100)
                _this.swiperheight = height; */

            },
            fail: (res) => { }
        })
    },
    onLoad() {
        this.homeTop();
        this.homeRooms();
    },
    onUnload() {
        if (timer) clearTimeout(timer);
    },
    methods: {
        /* 到底部了 */
        scrolltolower() {
            if (this.status === 'noMore' || this.status === 'loading') {
                return;
            }
            this.status = 'loading';
            this.pageNum++;
            timer = setTimeout(() => {
                this.homeRoomsTag();
            }, 500);
        },
        /* 跳转搜索 */
        jumpSearch() {
            uni.navigateTo({
                url: '../../search/search'
            })
        },
        change(item, index) {
            console.log(this.menuList, 'this.menuList')
            console.log(item, index)
            this.pageNum = 1;
            this.pageSize = 10;
            this.activeIndex = index;
            this.scrollInto = this.menuList[index].singId;
            this.tagId = this.menuList[index].id;
            if (this.tagId + '' === '-1') {
                this.homeRooms();
            } else {
                this.homeRoomsTag(true);
            }
        },
        swiperChange(e) {
            console.log(e)
            this.activeIndex = e.detail.current;
            this.scrollInto = this.menuList[e.detail.current].singId;
            this.tagId = this.menuList[e.detail.current].id;
        },
        /* 跳转房间 */
        jumpRoom(item) {
			if(!this.hasLogin) {
				uni.navigateTo({
				    url: '../../login/login'
				})
			}else {
				let owner = (this.identity.uid + '' === item.uid + '') ? true : false;
				uni.navigateTo({
				    url: `/house/liveHouse/liveHouse?owner=${owner}&pub_ticket=1&roomId=${item.uid}`
				})
			}
            // 判断是否登录 未登录跳转login页面
            // 以登录进入直播房间
            // 房间页面
            // uni.navigateTo({
            // 	url: '/house/index/index'
            // })
            // 登录页
            /* uni.navigateTo({
                // url: '../../login/login'
                // url: '/notice/index/index'
                url: '/house/liveHouse/liveHouse?owner=false&pub_ticket=1&roomId=146294&erbanNo=2915281'
            }) */
        },
        /* 首页顶部标签查询 */
        homeTop() {
            this.$api.homeTop().then(res => {
                console.log(res);
                let result = res.data;
                result.filter(item => item.singId = 'ID' + item.id)
                this.menuList = this.menuList.concat(result);
                console.log(this.menuList)
            })
        },
        /* 首页房间查询 */
        homeRooms() {
            this.roomList = [];
            this.$api.homeRooms().then(res => {
                console.log(res);
                this.roomList = res.data.heatRooms; // 推荐房间
            })
        },
        /* 首页根据标签查询 */
        homeRoomsTag(Empty) {
            if (Empty) this.roomList = [];
            this.status = 'loading';
            this.$api.homeRoomsTag({
                isTag: true,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                tagId: this.tagId
            }).then(res => {
                if (res.code == 200) {
                    let result = res.data;
                    if (result.length >= this.pageSize) {
                        this.status = 'more';
                    } else {
                        this.status = 'noMore';
                    }
                    if (result.length > 0) {
                        this.roomList.push(...result);
                    }
                } else {
                    this.status = 'noMore';
                }
            })
        }
    }
}
</script>

<style lang="scss">
@import "./index.scss";
</style>
